<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    @@ include("../../header.jsp"){} $$
    <!-- jqgrid-->
    <link href="/static/css/bootstrap.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/jqgrid/jqgrid.css" rel="stylesheet">
    <style>
        .ui-jqgrid-btable tbody tr td{
            vertical-align: middle!important;
        }
    </style>
</head>
<body>
    <div class="content-search">
        <div style="padding:15px;">
            <form id="search" class="layui-form layui-form-pane" lay-filter="form">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px">开始时间</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="startDate" placeholder="从 默认一月前" style="width: 130px">
                        <input class="layui-input" id="endDate" placeholder="到" style="width: 130px">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="notEnd" title="未完成" checked>
                        <input type="radio" name="type" value="end" title="已完成">
                        <input type="radio" name="type" value="all" title="全部">
                    </div>
                </div>
                <div class="layui-inline">
                    <btl:auth type="button" perm="biz:procHis:list" iconText="&#xe615;"
                               onclick="return search();" text=" 筛选"/>
                </div>
            </form>

        </div>
    </div>
        <!-- 内容主体区域 -->
    <div style="padding: 2px;">
        <div class="jqGrid_wrapper">
            <table id="table"></table>
            <div id="pager" ></div>
        </div>
    </div>
</div>
<script src="/static/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
<script src="/static/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
<script src="/static/jqgrid/frozen.js?v=1.0.1"></script>
<script src="/static/jqgrid/myjqGrid.js"></script>
<script>

    layui.use('form', function(){
    });
    var curDate = '${curDate!,dateFormat="yyyy-MM-dd"}';

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //限定可选日期
        var start = laydate.render({
            elem: '#startDate'
            , max: curDate
            , value: ''
        });
        var end = laydate.render({
            elem: '#endDate'
            , max: curDate
            , value: ''
        });
    });

    var colNames = ["ID","流程名称", "当前负责人", "开始时间", "结束时间", "操作"];
    var colModel = [{
        name : "id",
        index : "id",
        width : 50,
        hidden: true,
        align : "left"
    },{
        name : "name",
        index : "name",
        sortable : false,
        editable : false,
        width : 150,
        align : "center"
    },{
        name : "assignee",
        index : "assignee",
        editable : false,
        width : 100,
        align : "center"
    },{
        name : "startTime",
        index : "startTime",
        editable : false,
        width : 80,
        align : "center"
    },{
        name : "endTime",
        index : "endTime",
        editable : false,
        width : 80,
        align : "center"
    },{
        name : "action",
        index : "action",
        width : 150,
        title:false,
        editable:true,
        align : "center",
        formatter : function(cellvalue, options, rowdata){
            var html = '<btl:auth type="button" perm="biz:record:list" extClass="btn-record layui-bg-blue" iconText="&#xe60d;" dataId="' + rowdata.id + '" text="查看订单" />' +
                '<btl:auth type="button" perm="biz:procHis:list" extClass="btn-note layui-bg-red" iconText="&#xe640;" dataId="' + rowdata.id + '" text="查看日志" />';
            return html;
        }
    }];

    var myJqGrid = null;
    $(document).ready(function () {
        myJqGrid = new MyJqGrid({
            jqGrid_id: 'table',
            data: "/pc/biz/procHis/list.json",
            isSubGrid: false,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            colNames: colNames,
            colModel: colModel
        })
    });

    function search() {
        var start = $("#startDate").val();
        var end = $("#endDate").val();
        var type = $("input[name='type']:checked").val();
        var data = {"type" : type};
        if(start != '') data['after'] = start;
        if(end != '') data['before'] = end;
        myJqGrid.reloadGrid(data);
        return false;
    }

    $(function(){

        $(document).on("click", ".btn-record", function (e) {
            var id = $(this).data("id");
            var proc = myJqGrid.jqGrid('getLocalRow',id);

            console.log(id);
            console.log(proc);
            layer.open({
                title: '查看订单',
                type: 2,
                area: ['500px', '550px'],
                content: '/pc/biz/procHis/record?id='+$(this).data("id")
            });
        });

        $(document).on("click", ".btn-note", function (e) {
            var id = $(this).data("id");
            var proc = myJqGrid.jqGrid('getLocalRow',id);

            console.log(id);
            console.log(proc);
            layer.open({
                title: '查看日志',
                type: 2,
                area: ['500px', '350px'],
                content: '/pc/biz/procHis/notes?id='+$(this).data("id")
            });
        });
    });

</script>
</body>
</html>